iT邦幫忙

2023 iThome 鐵人賽
DAY 14
0
Modern Web

自己開發一個~?系列 第 14 篇

Springboot~前端開始可以打資料

15th鐵人賽
762 瀏覽

  • 分享至 

  • xImage
    •  

明天就是中秋了~
中秋節快樂~
/images/emoticon/emoticon24.gif

先確認一下目前的程式碼:
HomeController

package com.tzu.controllers;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;


@Controller

public class HomeController {
//做網頁路口 處理程序

 public HomeController() {
  System.out.println("Home控制物件已經產生");
  
 }
 @RequestMapping(path= {"/","/default"},method= {RequestMethod.GET})

 public String index (){
  System.out.println("首頁入口");
  return "index";
  }
 
}

是一個Spring控制器，並處理了GET請求，根據請求的路徑返回名為"index"的視圖。這意味著當用戶訪問根路徑("/")或"/default"時，將顯示名為"index"的視圖。

如果你的Spring應用程序已配置為使用Thymeleaf或其他模板引擎，你可以在"index"視圖中定義HTML內容，並將其返回給用戶。

MemberController

package com.tzu.controllers;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

//做會員註冊
@Controller
@RequestMapping(path="/member")
public class MemberController {
 
 //註冊
 @RequestMapping(path="/register",method= {RequestMethod.GET,RequestMethod.POST})
 public String register(String username,String password,String email,String realname) {
  System.out.println("register..."+username);
  //直接調用註冊表單
  return "memberregister";
  
 }

}

一個Spring控制器，處理了GET和POST請求，並且接受了四個參數：username、password、email和realname。當用戶訪問/member/register路徑時，它會執行register方法，並輸出使用者的username。

請確保Spring應用程序已正確配置並運行，並且有一個名為"memberregister"的視圖可供返回。在"memberregister"視圖中設計註冊表單，以便用戶可以輸入必要的信息。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首頁</title>
</head>
<body>
    <fieldset>
        <legend>首頁</legend>
   <h1 style="color: rgb(22, 19, 224);">Hello World</h1>
    </fieldset>
</body>
</html>
memberregister.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>註冊作業</title>
</head>
<body>
<fieldset>
<legend>註冊作業</legend>
<!--設計表單-->
<form method="post">
    
    <div>
        <div>使用者帳號</div>
        <input type="text" name="username">
    </div>
    <div>
        <div>使用者密碼</div>
        <input type="password" name="password">
    </div>
    <div>
        <div>真實姓名</div>
        <input type="text" name="realname">
    </div>
    <div>
        <div>EMAIL</div>
        <input type="text" name="email">
    </div>
    <div>
        <div>聯絡電話</div>
        <input type="text">
    </div>
<br/>
<input type="submit" value="註冊"/>
</form>
</fieldset>
</body>
</html>

測試網址:http://localhost:8080/member/registerform
https://ithelp.ithome.com.tw/upload/images/20231018/20119035QcovsJHBkY.png

註冊頁面中建立了一個表單，該表單包含用戶帳號、密碼、真實姓名、EMAIL和聯絡電話的輸入欄位，並具有一個"註冊"提交按鈕。

要確保Spring Boot應用程序正確運行並設定了Thymeleaf模板引擎。這將允許你在視圖中使用Thymeleaf模板引擎來呈現數據。

請確保以下事項：

  1. 確保你的Spring Boot應用程序已正確配置Thymeleaf。你可以在application.properties或application.yml中進行相關配置。
  2. 確保在Thymeleaf視圖中使用th:屬性來動態填充HTML元素，以呈現從控制器傳遞的數據。

當MemberController中的register方法返回"memberregister"視圖名稱時，Thymeleaf將根據模板將HTML呈現到客戶端。

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
 <modelVersion>4.0.0</modelVersion>
 <parent>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-parent</artifactId>
  <version>3.0.2</version>
  <relativePath/> <!-- lookup parent from repository -->
 </parent>
 <groupId>com.tzu</groupId>
 <artifactId>myweb</artifactId>
 <version>0.0.1-SNAPSHOT</version>
 <name>myweb</name>
 <description>Demo project for Spring Boot</description>
 <properties>
  <java.version>17</java.version>
 </properties>
 <dependencies>
  <dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-web</artifactId>
  </dependency>

  <dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-test</artifactId>
   <scope>test</scope>
  </dependency>
  <!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-thymeleaf -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
    <version>3.0.0</version>
</dependency>

 </dependencies>

 <build>
  <plugins>
   <plugin>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-maven-plugin</artifactId>
   </plugin>
  </plugins>
 </build>

</project>

pom.xml文件包含了Spring Boot應用程序的必要依賴項，並且已添加了Thymeleaf作為模板引擎的依賴。

以下是一些重要的事項，確保它們設置正確：

  1. Java版本：POM文件中指定的Java版本是17，確保開發環境中已安裝了Java 17。如果你使用的是較舊的Java版本，可以將<java.version>更改為該版本。

  2. 依賴項：dependencies 部分包括spring-boot-starter-web 和 spring-boot-starter-test，這些都是Spring Boot基本的依賴項。此外已添加了spring-boot-starter-thymeleaf，這是用於Thymeleaf模板引擎的依賴項。

  3. Spring Boot版本：POM文件中指定的Spring Boot版本是3.0.2。確保此版本的Spring Boot與你的應用程序代碼相容。

  4. Spring Boot Maven插件：已配置了Spring Boot的Maven插件，這允許你使用mvn spring-boot:run 命令運行的應用程序。

應該能夠正常運行和渲染你的Spring Boot應用程序，包括Thymeleaf模板引擎。

後面設計流程圖參考:
https://israynotarray.com/other/20230418/1970361460/

這裡修改後端的語法來對應前端的欄位

未改前程式碼:

package com.tzu.controllers;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

//做會員註冊
@Controller
@RequestMapping(path="/member")
public class MemberController {
 
 //註冊
 @RequestMapping(path="/register",method= {RequestMethod.GET,RequestMethod.POST})
 public String register(String username,String password,String email,String realname) {
  System.out.println("register..."+username);
  //直接調用註冊表單
  return "memberregister";
  
 }

}

MemberController處理了/member/register的GET和POST請求，並接收了表單中的參數（使用String username, String password, String email, String realname）。

你希望在POST請求中處理用戶的註冊數據，你可以在register方法中添加相關的處理邏輯，例如將用戶信息保存到數據庫中。這是一個簡單的示例：

@Controller
@RequestMapping(path="/member")
public class MemberController {
 
    // 註冊
    @RequestMapping(path="/register", method= {RequestMethod.GET, RequestMethod.POST})
    public String register(String username, String password, String email, String realname) {
        if (username != null && password != null && email != null && realname != null) {
            // 在這裡處理註冊邏輯，例如將用戶信息保存到數據庫中
            System.out.println("Registering user: " + username);
            System.out.println("Real Name: " + realname);
            System.out.println("Email: " + email);
            
            // 可以返回成功註冊的頁面，或者重定向到其他頁面
            return "registrationSuccess";
        } else {
            // 如果未提供足夠的註冊信息，返回到註冊頁面
            return "memberregister";
        }
    }
}

在這個示例中，如果所有必要的註冊信息都已提供，它會輸出用戶名、真實姓名和電子郵件，然後你可以根據你的需求在這裡執行其他註冊邏輯。如果信息不完整，它將返回到註冊頁面。

請注意，這只是一個簡單的示例，實際的註冊邏輯會依賴於你的項目需求和數據庫設置。

改後程式碼:

package com.tzu.controllers;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;

//做會員註冊
@Controller
@RequestMapping(path="/member")
public class MemberController {
 
 //註冊
 @RequestMapping(path="/register",method= {RequestMethod.GET,RequestMethod.POST})
 public String register(@RequestParam(name="username")String username
   ,String password,String email,
   @RequestParam(name="realname")String realname) {
  System.out.println("register..."+username);
  //直接調用註冊表單
  return "memberregister";
  
 }

}

MemberController現在使用@RequestParam來明確指定參數的名稱，這樣可以確保它們與表單中的輸入字段對應。

在這個示例中，@RequestParam(name="username")用於匹配username參數，@RequestParam(name="realname")用於匹配realname參數。確保了在POST請求中能夠正確地提取這些參數的值。

根據需要在register方法中繼續處理這些參數，例如將用戶信息保存到數據庫中，或者執行其他註冊相關的操作。

如果表單中的參數名稱與方法中的參數名稱完全一致，則不需要使用@RequestParam，Spring將自動將它們匹配起來。但在這個示例中，明確指定了參數名稱，這樣做有助於提高代碼的可讀性。

前端欄位:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>註冊作業</title>
</head>
<body>
<fieldset>
<legend>註冊作業</legend>
<!--設計表單-->
<form method="post">
    
    <div>
        <div>使用者帳號</div>
        <input type="text" name="username">
    </div>
    <div>
        <div>使用者密碼</div>
        <input type="password" name="password">
    </div>
    <div>
        <div>真實姓名</div>
        <input type="text" name="realname">
    </div>
    <div>
        <div>EMAIL</div>
        <input type="text" name="email">
    </div>
    <div>
        <div>聯絡電話</div>
        <input type="text">
    </div>
<br/>
<input type="submit" value="註冊"/>
</form>
</fieldset>
</body>
</html>

畫面顯示無影響
HTML表單包含使用者帳號、密碼、真實姓名、EMAIL、聯絡電話等輸入字段，並使用POST方法提交表單數據到後端。

在Spring Boot應用程序中設置一個對應的POST請求處理器，來處理從這個表單提交的數據。這個請求處理器將根據表單字段的name屬性來接收這些數據，正如在MemberController中已經設置的那樣。

將表單數據保存到數據庫中或進行其他處理，可以在MemberController的register方法中添加相應的邏輯。

請確保Spring Boot應用程序已正確配置，以接受POST請求並將其路由到MemberController中的register方法。並且確保在HTML表單中的action屬性指向正確的路徑，以便提交的數據被傳送到正確的端點。

再改一種寫法:預計用setxxx()跟getxxx()

package com.tzu.controllers;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;

//做會員註冊
@Controller
@RequestMapping(path="/member")
public class MemberController {
 
 //註冊Action(Method)
 @RequestMapping(path="/register",method= {RequestMethod.GET,RequestMethod.POST})
 public String register(@RequestParam(name="username")String username
   ,String password,String email,
   @RequestParam(name="realname")String realname) {
  System.out.println("register..."+username);
  //直接調用註冊表單
  return "memberregister";
  
 }
 //採用表單欄位進來後，自動封裝到一個物件導向去
 //註冊Action(Method)
  @RequestMapping(path="/registerform",method= {RequestMethod.GET,RequestMethod.POST})
  public String registerForm() {
   System.out.println("register...");
   //直接調用註冊表單
   return "memberregister";
   
  }

}

在MemberController中有兩個相似的註冊動作（register和registerForm），它們都使用了相同的GET和POST方法。允許用戶通過不同的URL訪問註冊頁面，可以保留這兩個動作。如果只是想要一個註冊動作，那麼可以簡化它，如下所示：

@Controller
@RequestMapping(path="/member")
public class MemberController {
 
    // 註冊Action(Method)
    @RequestMapping(path="/register", method= {RequestMethod.GET, RequestMethod.POST})
    public String register(
        @RequestParam(name="username") String username,
        String password,
        String email,
        @RequestParam(name="realname") String realname
    ) {
        System.out.println("register..." + username);
        // 可以在這裡處理註冊邏輯，比如將數據保存到數據庫
        return "memberregister";
    }
}

這樣的話，只需要一個register方法，它可以處理GET和POST請求。請注意，在這個方法內部處理註冊邏輯，例如將數據保存到數據庫中。

再新增一個package跟檔案:

Attribute

這裡的命名先違反規則，正常是要用駝峰命名法:

package com.tzu.domain;



public class Member {
 //Attribute
 private String username;
 private String password;
 private String realname;
 private String email;

}

使用滑鼠有右鍵來幫忙~Source>Generate Getters and Setters

在Member類中，已經聲明了四個私有屬性：username、password、realname和email。然而，想要使用這些屬性來存儲和訪問數據，需要添加相應的getter和setter方法。示例：

public class Member {
    // 屬性
    private String username;
    private String password;
    private String realname;
    private String email;

    // Getter 和 Setter 方法
    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getRealname() {
        return realname;
    }

    public void setRealname(String realname) {
        this.realname = realname;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }
}

通過添加這些getter和setter方法，可以將數據設置到Member對象中並從中獲取數據。這將使更方便地處理用戶的註冊數據。
用網址http://localhost:8080/member/registerform 測試
https://ithelp.ithome.com.tw/upload/images/20231030/201190355Hjg9oqsj6.png

謝謝收看/images/emoticon/emoticon41.gif


上一篇
Springboot~開始有前端
下一篇
Springboot~開始使用資料庫
系列文
自己開發一個~? 共 30 篇
  1. 26
    Springboot~新增產生對話盒
  2. 27
    Springboot~安全性配置RESTful API
  3. 28
    Springboot~security
  4. 29
    Springboot~做RBAC
  5. 30
    Springboot~明年見
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22091 篇
完賽人數
594 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙